<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="btn-add">
        <el-button
        icon="el-icon-circle-plus-outline"
        type="button"
        class="el-button el-button--primary"
        @click="addInOrOut"
        >
            新增</el-button
        >
    </div>

    <!-- 新增数据弹窗 -->
    <el-dialog
      title="新增"
      :visible.sync="showAdd"
      @close="showAdd = false"
      width="41%"
    >
        <el-form :model="createForm" ref="createForm" :rules="addRules">
            <div style="display: flex;">
                <el-form-item label="工作中心" prop="workCenter" label-width="80px">
                     <el-select 
                        v-model="createForm.workCenter" 
                        clearable
                        filterable
                        style="width: 150px"
                        @focus="getCenterList" 
                        placeholder="请选择工作中心"
                        class="ul-item">
                        <el-option :value="item" :label="item" v-for="(item,index) in this.centerList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户名称" prop="customerName" label-width="80px">
                    <el-select filterable clearable v-model="createForm.customerName" placeholder="请选择客户" style="width:150px">
                      <el-option :value="item" :label="item" v-for="(item,index) of this.clientList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题环节" prop="problemLink" label-width="80px">
                    <el-select 
                        v-model="createForm.problemLink" 
                        clearable
                        filterable
                        style="width: 150px"
                        placeholder="请选择问题环节"
                        class="ul-item">
                        <el-option :value="item" :label="item" v-for="(item,index) in this.issueList" :key="index"/>
                    </el-select>
                    <!-- <el-input v-model="createForm.content" autosize style="width: 150px"/> -->
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="产品编码" prop="clientNumber" label-width="80px">
                    <el-input v-model="createForm.clientNumber" placeholder="产品编码" autosize style="width: 150px"/>
                </el-form-item>
                <el-form-item label="不良条码" prop="deviceBarcode" label-width="80px">
                    <el-input v-model="createForm.deviceBarcode" placeholder="不良条码" autosize style="width: 150px"/>
                </el-form-item>
                <el-form-item v-if="createForm.deviceBarcode" label="成产班组" prop="sectionNo" label-width="80px">
                    <el-input v-model="createForm.sectionNo"  placeholder="工段号" autosize style="width: 150px"/>
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="不良数量" prop="badnessNumber" label-width="80px">
                    <el-input v-model.number="createForm.badnessNumber" type="number" placeholder="不良数量" autosize style="width: 150px"/>
                </el-form-item>
                <el-form-item label="问题类别" prop="questionType" label-width="80px">
                    <el-select filterable clearable v-model="createForm.questionType" placeholder="问题类别" style="width:150px">
                      <el-option :value="item" :label="item" v-for="(item,index) of this.questionTypeList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="责任单位" prop="accountabilityUnit" label-width="80px">
                    <el-select filterable clearable v-model="createForm.accountabilityUnit" placeholder="责任单位" style="width:150px">
                      <el-option :value="item" :label="item" v-for="(item,index) of this.unitList" :key="index"/>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="问题描述" prop="problemDescription" label-width="80px" >
                <el-input v-model="createForm.problemDescription" type="textarea" placeholder="" autosize style="width: 100%"/>
            </el-form-item>
            <el-form-item label="原因分析" prop="analysisOfCauses" label-width="80px" >
                <el-input v-model="createForm.analysisOfCauses" disabled type="textarea" placeholder="" autosize style="width: 100%"/>
            </el-form-item>
            <el-form-item label="改善措施" prop="improvementMeasure" label-width="80px" >
                <el-input v-model="createForm.improvementMeasure" disabled type="textarea" placeholder="" autosize style="width: 100%"/>
            </el-form-item>
            <div style="display: flex;">
                <el-form-item label="分析人" prop="assayer" label-width="60px" >
                    <el-select filterable clearable v-model="createForm.assayer" placeholder="措施执行人" @focus="focusName" style="width:120px">
                      <el-option :value="item.userName" :label="item.userName" v-for="(item,index) of this.nameList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="措施执行人" prop="personInCharge" label-width="100px" >
                    <el-select filterable clearable v-model="createForm.personInCharge" placeholder="措施执行人" @focus="focusName" style="width:130px">
                      <el-option :value="item.userName" :label="item.userName" v-for="(item,index) of this.nameList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="要求完成时间" prop="completionTime" label-width="120px" >
                    <el-date-picker
                        v-model="createForm.completionTime"
                        type="datetime"
                        style="width: 100%"
                        placeholder="选择日期时间"
                        align="right"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        >
                    </el-date-picker>
                    <!-- <el-input v-model="createForm.completionTime" autosize style="width: 150px"/> -->
                </el-form-item>
            </div>
        </el-form>

        <!-- 公共底部 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="showAdd = false">取 消</el-button>
            <el-button
            type="primary"
            @click="addfacility('createForm')"
            >新增</el-button
            >
        </div>
    </el-dialog>
    
    <div class="filter-container">
      <!-- style="width: 150px;margin-right:15px;" -->

        <el-select 
            v-model="param.workCenter" 
            clearable
            filterable
            style="margin-right: 15px;width: 150px"
            placeholder="请选择工作中心"
            class="ul-item">
            <el-option :value="item" :label="item" v-for="(item,index) in this.workCenterList" :key="index"/>
        </el-select>

        <el-select 
            v-model="param.customerName" 
            clearable
            filterable
            style="margin-right: 15px;width: 150px"
            placeholder="请选择客户名称"
            class="ul-item">
            <el-option :value="item" :label="item" v-for="(item,index) in this.customerNameLinkList" :key="index"/>
        </el-select>

        <el-select 
            v-model="param.problemLink" 
            clearable
            filterable
            style="margin-right: 15px;width: 150px"
            placeholder="请选择问题环节"
            class="ul-item">
            <el-option :value="item" :label="item" v-for="(item,index) in this.issueList" :key="index"/>
        </el-select>

        <el-input
            @keyup.enter.native="getData"
            clearable
            style="margin-right: 15px;width: 150px"
            v-model="param.clientNumber"
            placeholder="请输入客户编码"
        ></el-input>

        <el-select filterable clearable v-model="param.questionType" placeholder="请选择问题类别" style="margin-right: 15px;width: 150px">
              <el-option :value="item" :label="item" v-for="(item,index) of this.questionTypeList" :key="index"/>
        </el-select>

        <el-select filterable clearable v-model="param.accountabilityUnit" placeholder="请选择责任单位" style="margin-right: 15px;width: 150px">
          <el-option :value="item" :label="item" v-for="(item,index) of this.unitList" :key="index"/>
        </el-select>

        <el-date-picker
          v-model="dateOptions"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>

        <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
        <el-button
            type="button"
            v-waves
            class="el-button el-button--warning"
            @click="cancelSubmit"
        >
        重置</el-button>

    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="工作中心"  prop="workCenter" align="center"/>
      <el-table-column label="客户名称"  prop="customerName" align="center"/>
      <el-table-column label="问题环节"  prop="problemLink" align="center"/>
      <el-table-column label="客户编码"  prop="clientNumber" align="center"/>
      <el-table-column label="问题描述"  prop="problemDescription" align="center"/>
      <el-table-column label="不良数量"  prop="badnessNumber" align="center"/>
      <el-table-column label="不良条码"  prop="deviceBarcode" align="center" width="120"/>
      <el-table-column label="问题类别"  prop="questionType" align="center"/>
      <el-table-column label="责任单位"  prop="accountabilityUnit" align="center"/>
      <el-table-column label="原因分析"  prop="analysisOfCauses" align="center"/>
      <el-table-column label="分析人"  prop="assayer" align="center"/>
      <el-table-column label="改善措施"  prop="improvementMeasure" align="center"/>
      <el-table-column label="责任人"  prop="personInCharge" align="center"/>
      <el-table-column label="完成时间"  prop="completionTime" align="center"/>
      <el-table-column label="是否闭环"  prop="isClosedLoop" align="center"/>
      <el-table-column label="提交人"  prop="submitter" align="center"/>
      <el-table-column label="提交日期"  prop="createTime" align="center"/>
      <el-table-column label="操作" fixed="right" align="center" width="130">
            <template slot-scope="scope" >
                <div class="fx" style="display: flex">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button
                        icon="el-icon-delete"
                        class="el-button el-button--danger"
                        style="font-size: 15px;"
                        @click="handleDelete(scope.row,scope.$index)"
                    ></el-button>
                </div>
            </template>
      </el-table-column>
    </el-table>

    <!-- 修改数据弹窗 -->
    <el-dialog
      title="修改"
      :visible.sync="showupd"
      @close="showupd = false"
      width="41%"
    >
        <el-form :model="updForm" ref="updForm" :rules="addRules1">
            <div style="display: flex;">
                <el-form-item label="工作中心" prop="workCenter" label-width="80px">
                     <el-select 
                        v-model="updForm.workCenter" 
                        clearable
                        filterable
                        style="width: 150px"
                        @focus="getCenterList" 
                        placeholder="请选择工作中心"
                        class="ul-item">
                        <el-option :value="item" :label="item" v-for="(item,index) in this.centerList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户名称" prop="customerName" label-width="80px">
                    <el-select filterable clearable v-model="updForm.customerName" placeholder="请选择客户" style="width:150px">
                      <el-option :value="item" :label="item" v-for="(item,index) of this.clientList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题环节" prop="problemLink" label-width="80px">
                    <el-select 
                        v-model="updForm.problemLink" 
                        clearable
                        filterable
                        style="width: 150px"
                        placeholder="请选择问题环节"
                        class="ul-item">
                        <el-option :value="item" :label="item" v-for="(item,index) in this.issueList" :key="index"/>
                    </el-select>
                    <!-- <el-input v-model="updForm.content" autosize style="width: 150px"/> -->
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="产品编码" prop="clientNumber" label-width="80px">
                    <el-input v-model="updForm.clientNumber" autosize style="width: 150px"/>
                </el-form-item>
                <el-form-item label="不良条码" prop="deviceBarcode" label-width="80px">
                    <el-input v-model="updForm.deviceBarcode" autosize style="width: 150px"/>
                </el-form-item>
                <el-form-item v-if="updForm.deviceBarcode" label="成产班组" prop="sectionNo" label-width="80px">
                    <el-input v-model="updForm.sectionNo" autosize style="width: 150px"/>
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="不良数量" prop="badnessNumber" label-width="80px">
                    <el-input v-model.number="updForm.badnessNumber"  type="number" autosize style="width: 150px"/>
                </el-form-item>
                <el-form-item label="问题类别" prop="questionType" label-width="80px">
                    <el-select filterable clearable v-model="updForm.questionType" placeholder="问题类别" style="width:150px">
                      <el-option :value="item" :label="item" v-for="(item,index) of this.questionTypeList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="责任单位" prop="accountabilityUnit" label-width="80px">
                    <el-select filterable clearable v-model="updForm.accountabilityUnit" placeholder="" style="width:150px">
                      <el-option :value="item" :label="item" v-for="(item,index) of this.unitList" :key="index"/>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="问题描述" prop="problemDescription" label-width="80px">
                <el-input v-model="updForm.problemDescription" type="textarea" autosize style="width: 100%"/>
            </el-form-item>
            <div style="display: flex;justify-content: flex-end; margin: -10px 50px 15px 0;">
                <div style="margin-right: 20px;">提交人:{{ updForm.submitter }}</div>
                <div>提交时间:{{ updForm.createTime }}</div>
            </div>
            <el-form-item label="原因分析" prop="analysisOfCauses" label-width="80px" >
                <el-input v-model="updForm.analysisOfCauses" type="textarea" autosize style="width: 100%"/>
            </el-form-item>
            <el-form-item label="改善措施" prop="improvementMeasure" >
                <el-input v-model="updForm.improvementMeasure" type="textarea" autosize style="width: 100%"/>
            </el-form-item>
            <div style="display: flex;">
                <el-form-item label="分析人" prop="assayer" label-width="60px" >
                    <el-select filterable clearable v-model="updForm.assayer" placeholder="" @focus="focusName" style="width:120px">
                      <el-option :value="item.userName" :label="item.userName" v-for="(item,index) of this.nameList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="措施执行人" prop="personInCharge" label-width="100px" >
                    <el-select filterable clearable v-model="updForm.personInCharge" placeholder="" @focus="focusName" style="width:130px">
                      <el-option :value="item.userName" :label="item.userName" v-for="(item,index) of this.nameList" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="要求完成时间" prop="completionTime" label-width="120px" >
                    <el-date-picker
                        v-model="updForm.completionTime"
                        type="datetime"
                        style="width: 100%"
                        placeholder="选择日期时间"
                        align="right"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        >
                    </el-date-picker>
                    <!-- <el-input v-model="updForm.completionTime" autosize style="width: 150px"/> -->
                </el-form-item>
            </div>
        </el-form>

        <!-- 公共底部 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="showupd = false">取 消</el-button>
            <el-button
            type="primary"
            @click="updprocess('updForm')"
            >修改</el-button
            >
        </div>
    </el-dialog>

   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>

  </div>
</template>

<script>
import { complaintSel,complaintAdd,complaintUpd,complaintDel } from "@/api/problem"
import { findUserListGroup } from '@/api/chargingData.js'
import mixin from '@/utils/mixin.js'
export default {
    name: 'complaintInquiry',
    mixins: [mixin],
    data () {
        return {
            listQuery: {
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            param: {
                code: '',                      
                content: ''                    
            },
            total: 0,                                      //数据的总数
            tableInfo: [],
            tableMX:[],
            showMX: false,
            loadingList: false,
            loading: false,
            centerList: [],                         //工作中心列表
            createForm: {},
            updForm: {},
            props: { multiple: true },
            // 表单校验
            addRules: {
                workCenter: [
                    { required: true, message: "工作中心不能为空!", trigger: "change" },
                ],
                customerName: [
                    { required: true, message: "客户名称不能为空!", trigger: "change" },
                ],
                problemLink: [
                    { required: true, message: "问题环节不能为空!", trigger: "change" },
                ],
                clientNumber: [
                    { required: true, message: "产品编码不能为空!", trigger: "change" },
                ],
                deviceBarcode: [
                    { required: true, message: "不良条码不能为空!", trigger: "change" },
                ],
                badnessNumber: [
                    { required: true, message: "不良数量不能为空!", trigger: "change" },
                ],
                questionType: [
                    { required: true, message: "问题类别不能为空!", trigger: "change" },
                ],
                accountabilityUnit: [
                    { required: true, message: "责任单位不能为空!", trigger: "change" },
                ],
                problemDescription: [
                    { required: true, message: "问题描述不能为空!", trigger: "change" },
                ],
                // assayer: [
                //     { required: true, message: "分析人不能为空!", trigger: "change" },
                // ],
                // personInCharge: [
                //     { required: true, message: "措施执行人不能为空!", trigger: "change" },
                // ],
                // completionTime: [
                //     { required: true, message: "完成时间不能为空!", trigger: "change" },
                // ],
            },
            addRules1: {
                workCenter: [
                    { required: true, message: "工作中心不能为空!", trigger: "change" },
                ],
                customerName: [
                    { required: true, message: "客户名称不能为空!", trigger: "change" },
                ],
                problemLink: [
                    { required: true, message: "问题环节不能为空!", trigger: "change" },
                ],
                clientNumber: [
                    { required: true, message: "产品编码不能为空!", trigger: "change" },
                ],
                deviceBarcode: [
                    { required: true, message: "不良条码不能为空!", trigger: "change" },
                ],
                badnessNumber: [
                    { required: true, message: "不良数量不能为空!", trigger: "change" },
                ],
                questionType: [
                    { required: true, message: "问题类别不能为空!", trigger: "change" },
                ],
                accountabilityUnit: [
                    { required: true, message: "责任单位不能为空!", trigger: "change" },
                ],
                problemDescription: [
                    { required: true, message: "问题描述不能为空!", trigger: "change" },
                ],
                analysisOfCauses: [
                    { required: true, message: "原因分析不能为空!", trigger: "change" },
                ],
                improvementMeasure: [
                    { required: true, message: "改善措施不能为空!", trigger: "change" },
                ],
                assayer: [
                    { required: true, message: "分析人不能为空!", trigger: "change" },
                ],
                personInCharge: [
                    { required: true, message: "措施执行人不能为空!", trigger: "change" },
                ],
                completionTime: [
                    { required: true, message: "完成时间不能为空!", trigger: "change" },
                ],
            },
            showAdd: false,
            showupd: false,
            userInfo: this.$store.state.user.userInfo,
            dateOptions: this.getNowTime(),
            pickerOptions: {                            // 选择时间范围
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            issueList:['售后问题','市场投诉','外检问题','后工序问题'],
            unitList:['装配车间','数控车间','焊接','喷涂','物料','供应商','EMS总装车间'],
            clientList:['华为','维谛','广电运通','英维克','奥特迅','科士达','康冠','科信','迈冲','麦科田','飞尔特','高德威','广电五洲','润诚达','智瑞通'],
            questionTypeList:['包装问题','尺寸问题','螺钉问题','错装问题','漏装问题','装反问题','标签问题','外观问题','接线问题','装配工艺','杂物问题','物料不良','扎线问题','附件问题','测试问题','工艺问题','工程问题','记录问题','可靠性问题','错漏装','功率节点','喷涂问题','外观不良','标签不良','电缆问题','包材问题','器件问题','漏焊','试水问题','参数设置','特性问题','丝印问题','表面不良','配送问题','理货问题'],
            nameList:[],
            workCenterList:[],
            customerNameLinkList:[],
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        async focusName(){
            let query = {page:1,limit:9999,status: 1}
            const {data} = await findUserListGroup(query)
            console.log(data)
            this.nameList = data
        },
          //初始默认执行(重点)，返回日期格式YYYY-MM-DD HH:MM:SS
      getNowTime() {
        let dateTime = +new Date()+8*3600*1000
        const start = new Date(dateTime - 3600 * 1000 * 24 * 7)
            .toISOString()
            .replace('T', ' ')
            .split('.')[0]
            // .substring(0,10) //默认开始时间7天前
        const end = new Date(dateTime)
            .toISOString()
            .replace('T', ' ')
            .split('.')[0]
            // .substring(0,10)//默认结束时间当前时间
        console.log([start, end])
        return [start, end]
        },
        getData(){
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            if(this.param.workCenter){ query.workCenter = this.param.workCenter}
            if(this.param.customerName){ query.customerName = this.param.customerName}
            if(this.param.problemLink){ query.problemLink = this.param.problemLink}
            if(this.param.clientNumber){ query.clientNumber = this.param.clientNumber}
            if(this.param.questionType){ query.questionType = this.param.questionType}
            if(this.param.accountabilityUnit){ query.accountabilityUnit = this.param.accountabilityUnit}
            if(this.dateOptions) {
              if(this.dateOptions.length) {
                  query.startTime = this.dateOptions[0]
                  query.endTime = this.dateOptions[1]
              }
            }
            let data = await complaintSel(query)
            let errmsg = data.msg
            this.loadingList = false
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errmsg)
            this.total = data.data.count
            this.tableInfo = data.data.list
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        transformDat(res) {
          const mapInfo = {
            index: '序号',
            workCenter: '工作中心',
            customerName: '客户名称',
            problemLink: '问题环节',
            clientNumber: '客户编码',
            problemDescription: '问题描述',
            badnessNumber: '不良数量',
            deviceBarcode: '不良条码',
            questionType: '问题类别',
            accountabilityUnit: '责任单位',
            analysisOfCauses: '原因分析',
            assayer: '分析人',
            improvementMeasure: '改善措施',
            personInCharge: '责任人',
            completionTime: '完成时间',
            isClosedLoop: '是否闭环',
            submitter: '提交人',
            createTime: '提交日期',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
        handleDelete(row,index) {
            this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delprocess(row,index)
            }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
            })
        },
        async delprocess(row,index){
          let res = await complaintDel({id: row.id})
          if(res.code == '500') return
          if(res.code != '1') return this.$message.error(res.msg)
          this.tableInfo.splice(index,1)
          this.$message.success(res.msg)
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000
          if(this.param.workCenter){ query.workCenter = this.param.workCenter}
            if(this.param.customerName){ query.customerName = this.param.customerName}
            if(this.param.problemLink){ query.problemLink = this.param.problemLink}
            if(this.param.clientNumber){ query.clientNumber = this.param.clientNumber}
            if(this.param.questionType){ query.questionType = this.param.questionType}
            if(this.param.accountabilityUnit){ query.accountabilityUnit = this.param.accountabilityUnit}
          let arr = await complaintSel(query)
          if(arr.code == '500') return
          if(arr.code != '1'){
            this.loading = false
            return this.$message.error(errmsg)
          }
          if(!arr.data.list.length){
            this.loading = false
            this.$message.error('暂无数据')
          }
          const { header, data } = this.transformDat(this.setSort(arr.data.list))
          import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '投诉问题查询', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              index: index+1,
              workCenter: item.workCenter,
              customerName: item.customerName,
              problemLink: item.problemLink,
              clientNumber: item.clientNumber,
              problemDescription: item.problemDescription,
              badnessNumber: item.badnessNumber,
              deviceBarcode: item.deviceBarcode,
              questionType: item.questionType,
              accountabilityUnit: item.accountabilityUnit,
              analysisOfCauses: item.analysisOfCauses,
              assayer: item.assayer,
              improvementMeasure: item.improvementMeasure,
              personInCharge: item.personInCharge,
              completionTime: item.completionTime,
              isClosedLoop: item.isClosedLoop,
              submitter: item.submitter,
              createTime: item.createTime,
            }
            arr1.push(obj)
          })
          return arr1
        },
        cancelSubmit(){
            this.param = {     
            }
            this.listQuery.page = 1
            this.handleFilter()
        },
        // 提交表单之前先进行验证
        addfacility(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submitprocess()
                } else {
                    return false
                }
            })
        },
        async submitprocess(){
            let query = Object.assign({},this.createForm)
            if(query.badnessNumber < 0) return this.$message.error('不良数量不能小于0')
            const data = await complaintAdd(query)
            const errMsg = data.msg
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errMsg)
            this.$message.success(errMsg)
            this.resetForm()
            this.showAdd = false
            this.handleFilter()
        },
        resetForm(){
             this.$refs.createForm.resetFields();
        },
        handleEdit(row){
            this.updForm = Object.assign({},row)
            this.showupd = true
        },
        // 提交表单之前先进行验证
        updprocess(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.complaintUpd()
                } else {
                    return false
                }
            })
        },
        async complaintUpd(){
            let query = Object.assign({},this.updForm)
            if(query.badnessNumber < 0) return this.$message.error('不良数量不能小于0')
            const data = await complaintUpd(query)
            const errMsg = data.msg
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errMsg)
            this.showupd = false
            this.handleFilter()
            this.$message.success(errMsg)
        },
        addInOrOut(){
            this.showAdd = true
        },
        // 获取可先的工作中心和	检验环节
        async getList(){
            let res = await complaintSel({page:1,limit:9999})
            console.log('res',res);
            const workCenter = res.data.list.map(item => item.workCenter)
            const customerNameLink = res.data.list.map(item => item.customerName)
            this.workCenterList = [...new Set(workCenter)]
            this.customerNameLinkList = [...new Set(customerNameLink)]
        }
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
        this.getList()
    }
}
</script>

<style>

.btn-add{
    margin-bottom: 28px;
}

.ul-item{
  width: 85%;
}
</style>
